<template>
    <div style="min-width:809px">
       <div v-if="$route.path == '/personalAdmin/leaveApprover'">
         
        <table v-loading="loading">
            <thead>
                <tr >
                    <td colspan="4">一般请假（连续5天以下）</td>
                </tr>
                <tr>
                    <td>
                        假期天数
                    </td>
                    <td colspan="3">
                        <span class="el-icon-arrow-left"></span>5天
                    </td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="t1">申请人</td>
                    <td v-for="item in ordinaryList" :key="item.id">
                        {{item.title}}
                    </td>
                </tr>

                <tr v-for="(el,index) in ordinaryList" :key="el.id">
                    <td>审批人{{index+1}}</td>
                    <td v-for="(item,i) in ordinaryList" :key="i">
                        <el-select v-model="item[type[index]]" :disabled="sekDisabled(item,index)" @change="leaveSetSave(item)" clearable  placeholder="">
                            <!-- <el-option label="/" value="" ></el-option> -->
                            <el-option
                            v-for="val in positionList"
                            :key="val.id"
                            :label="val.title"
                            :value="val.id">
                            </el-option>
                        </el-select>
                    </td>
                </tr>

                <!-- <tr>
                    <td>审批人2</td>
                    <td v-for="item in ordinaryList" :key="item.id">
                        <el-select v-model="item.two" clearable @change="leaveSetSave(i)"  placeholder="">
                            <el-option
                            v-for="val in positionList"
                            :key="val.id"
                            :label="val.title"
                            :value="val.id">
                            </el-option>
                        </el-select>
                    </td>
                </tr>
                <tr>
                    <td>审批人3</td>
                    <td v-for="item in ordinaryList" :key="item.id">
                        <el-select v-model="item.three" clearable @change="leaveSetSave(i)"  placeholder="">
                            <el-option
                            v-for="val in positionList"
                            :key="val.id"
                            :label="val.title"
                            :value="val.id">
                            </el-option>
                        </el-select>
                    </td>
                </tr> -->

                <tr>
                    <td>结果悉知</td>
                    <td>申请人，总经理/副总经理，店长</td>
                    <td>申请人，总经理/副总经理，办公室员工</td>
                    <td>申请人，总经理/副总经理，办公室员工</td>
                </tr>
                <tr>
                    <td>备注</td>
                    <td colspan="3">
                        <el-input
                        type="textarea"
                        :rows="6"
                        readonly
                        v-model="t1">
                        </el-input>
                    </td>
                </tr>
            </tbody>
        </table>
        
        <table v-loading="loading">
            <thead>
                <tr >
                    <td colspan="4">特批请假（连续5天以上，含5天）</td>
                </tr>
                <tr>
                    <td>
                        假期天数
                    </td>
                    <td colspan="3">
                        <span class="iconfont icon-dayudengyu"></span>5天
                    </td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="t1">申请人</td>
                    <td v-for="item in giveList" :key="item.id">
                        {{item.title}}
                    </td>
                </tr>

                <!-- <tr>
                    <td>审批人1</td>
                    <td v-for="(item,i) in giveList" :key="item.id">
                        <el-select v-model="item.one" @change="leaveSetSave(i,2)" clearable  placeholder="">
                            <el-option
                            v-for="val in positionList"
                            :key="val.id"
                            :label="val.title"
                            :value="val.id">
                            </el-option>
                        </el-select>
                    </td>
                </tr> -->
                <tr v-for="(el,index) in giveList" :key="el.id">
                    <td>审批人{{index+1}}</td>
                    <td v-for="(item,i) in giveList" :key="i">
                        <el-select v-model="item[type[index]]" :disabled="sekDisabled(item,index)" @change="leaveSetSave(item)" clearable  placeholder="">
                            <!-- <el-option label="/" value="" ></el-option> -->
                            <el-option
                            v-for="val in positionList"
                            :key="val.id"
                            :label="val.title"
                            :value="val.id">
                            </el-option>
                        </el-select>
                    </td>
                </tr>
                <tr>
                    <td>结果悉知</td>
                    <td>审批人，总经理/副总经理，店长</td>
                    <td>审批人，总经理/副总经理，办公室员工</td>
                    <td>审批人，总经理/副总经理，办公室员工</td>
                </tr>
                <tr>
                    <td>备注</td>
                    <td colspan="3">
                        <el-input
                        type="textarea"
                        :rows="6"
                        readonly
                        v-model="t2">
                        </el-input>
                    </td>
                </tr>
            </tbody>
        </table>

       </div>
       <router-view></router-view>
    </div>
</template>

<script>
  export default {
    data() {
      return {
          show1:'',
          loading:false,
          loading2:false,
          ordinaryList:[],//一般请假
          giveList:[],//特批请假
          positionList:[],//岗位列表
          type:['one','two','three'],
          t1:`1.无特殊情况连续休假不得超过5天，须提前7天申请
2.请假申请需要详细的说明请假事由，假期后上班日期，请假类别（年假，事假，调休，本休）不在岗期间工作安排`,
            t2:`1.特殊情况特殊审批，须提前30天申请
2.请假申请需要详细的说明请假事由，假期后上班日期，请假类别（年假，事假，调休，本休）不在岗期间工作安排`,
      };
    },
    created(){
        // this.show1 = this.selectData[0].text
        this.homegetPosition();
        this.getordinaryList();
    },
    methods: {
        sekDisabled(item,i){
            if(i==0)return false;
            if(item[this.type[i-1]]) return false;
            return true;
        },
        async leaveSetSave(item){
            this.loading = true;
            // let obj = type==2?this.giveList[i]:this.ordinaryList[i];
            let {code,data} = await this.$Http.leaveSetSave({
                id:item.id,
                one:item.one,
                two:item.two,
                three:item.three
            })
            this.loading = false;
            if(code){
                this.$message.success(`设置成功`)
            }
        },
        async homegetPosition(){
            let {code,data} = await this.$Http.homegetPosition();
            if(code){
                this.positionList = data;
            }
        },
        async getordinaryList(){
            this.loading = true;
            let {code,data} = await this.$Http.leaveSet();
            this.loading = false;
            if(code){
                data.forEach(v=>{
                    for(let key in v){
                        if(v[key]==0)v[key]='';
                    }
                    if(v.type==1){
                        this.ordinaryList.push(v);
                    }else {
                        this.giveList.push(v)
                    }
                })
            }

        }
    }
  };
</script>

<style lang="scss" scoped>
table{
    margin: 40px;
    width: 1000px;
    border: solid #ebeef5;
    border-width: 1px 0 0 1px;
    border-collapse: collapse;
    border-spacing: 0;
    background: #fff;
    thead{
        tr{
            padding: 10px 20px;
            font-weight: 700;
            color: #909399;
            background: #fafafa;
            div{
                &:nth-child(1){
                    font-weight: 300;
                }
            }
        }
    }
    .t1,tbody td,thead td{
        border: solid #ebeef5;
        border-width: 0 1px 1px 0px;
    }
    .active-color{
        transform: scale(1.2);
        // /* border: 1px solid red !important; */
        box-shadow: #ffffff 1px -1px 6px 4px;
        z-index: 999;
        position: absolute;
        // color: red;
    }
    td{
        color: #000000;
        transition:all 0.3s;
    }
    
    tr{
        td{
            &:nth-child(1){
                white-space:nowrap;
            }
        }
    }
    tbody{
        td{
            // cursor: pointer;
            user-select: none;
        }
    }
    th,td{
        padding: 20px;
        text-align: center;
    }
}
</style>